<template>
	<view class="face-container">
		<!-- 头部状态栏 -->
		<view class="header-section">
			<view class="status-indicator" :class="statusClass">
				<u-icon :name="statusIcon" :color="statusColor" size="24"></u-icon>
				<text class="status-text">{{ statusText }}</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 人脸识别区域 -->
			<view class="face-capture-area">
				<view class="portrait-container" :class="{ 'has-image': img, 'processing': isProcessing }">
					<!-- 扫描动画框 -->
					<view class="scan-frame" v-if="!img || isProcessing">
						<view class="scan-line"></view>
						<view class="corner corner-tl"></view>
						<view class="corner corner-tr"></view>
						<view class="corner corner-bl"></view>
						<view class="corner corner-br"></view>
					</view>

					<!-- 默认头像或用户头像 -->
					<image 
						:src="img || $IMG_URL('/static/user/default_avatar.png')" 
						mode="aspectFill" 
						class="avatar-image"
						:class="{ 'uploaded': img }"
						@click="handleImageClick">
					</image>

					<!-- 操作按钮 -->
					<view class="action-overlay" v-if="showActionButton">
						<view class="action-button" :class="actionButtonClass" @click="handleAction">
							<u-icon :name="actionIcon" color="#FFFFFF" size="16"></u-icon>
							<text class="action-text">{{ actionText }}</text>
						</view>
					</view>

					<!-- 加载状态 -->
					<view class="loading-overlay" v-if="isProcessing">
						<view class="loading-spinner"></view>
						<text class="loading-text">{{ loadingText }}</text>
					</view>
				</view>

				<!-- 状态提示 -->
				<view class="status-tips">
					<view class="main-title">{{ mainTitle }}</view>
					<view class="description-list">
						<view 
							v-for="(tip, index) in currentTips" 
							:key="index" 
							class="tip-item"
							:style="{ animationDelay: (index * 0.2) + 's' }">
							<u-icon name="info-circle" color="#73F0EA" size="28"></u-icon>
							<text class="tip-text">{{ tip }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作区域 -->
		<view class="footer-section" :class="{ show: !isProcessing }">
			<view class="main-button" :class="buttonClass" @click="handleMainAction">
				<view class="button-content">
					<u-icon v-if="mainButtonIcon" :name="mainButtonIcon" color="#FFFFFF" size="18"></u-icon>
					<text class="button-text">{{ mainButtonText }}</text>
				</view>
				<view class="button-glow"></view>
			</view>
		</view>

		<!-- Toast消息 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { face } from '@/api/user.js'
	export default {
		data() {
			return {
				img: '',
				is_face: 0,
				isProcessing: false,
				loadingText: '正在处理...',
				tips: {
					0: ['请先开通会员服务', '会员专享智能门禁服务'],
					1: ['不要使用美颜或修图功能', '请直视镜头，保持五官清晰', '用于门店门禁识别，可随时更换'],
					2: ['已完成人脸识别采集', '会员专享智能门禁服务', '门禁识别异常请联系店长']
				}
			};
		},
		computed: {
			statusClass() {
				return { 'status-pending': this.is_face === 0, 'status-ready': this.is_face === 1, 'status-completed': this.is_face === 2 };
			},
			statusIcon() { return { 0: 'lock', 1: 'camera', 2: 'checkmark-circle' }[this.is_face] || 'help-circle'; },
			statusColor() { return { 0: '#FFA500', 1: '#73F0EA', 2: '#4CAF50' }[this.is_face] || '#999'; },
			statusText() { return { 0: '需要开通会员', 1: '可以采集人脸', 2: '已完成采集' }[this.is_face] || '未知状态'; },
			mainTitle() { return { 0: '人脸识别服务', 1: '人脸采集', 2: '人脸已采集' }[this.is_face] || '人脸识别'; },
			currentTips() { return this.tips[this.is_face] || []; },
			showActionButton() { return this.is_face !== 0 && !this.isProcessing; },
			actionButtonClass() { return { 'upload-action': this.is_face === 1, 'delete-action': this.is_face === 2 }; },
			actionIcon() { return this.is_face === 2 ? 'trash' : (this.img ? 'refresh' : 'camera'); },
			actionText() { if (this.is_face === 2) return '删除人脸'; return this.img ? '重新上传' : '点击上传'; },
			buttonClass() { return { 'button-primary': this.is_face === 1, 'button-success': this.is_face === 2, 'button-warning': this.is_face === 0, 'button-disabled': this.isProcessing }; },
			mainButtonIcon() { return { 0: 'lock', 1: 'checkmark', 2: 'home' }[this.is_face]; },
			mainButtonText() { if (this.isProcessing) return '处理中...'; return { 0: '开通会员', 1: '提交人脸', 2: '返回首页' }[this.is_face] || '确定'; }
		},
		onLoad() { this.getFaceInfo(); },
		methods: {
			getFaceInfo() {
				this.isProcessing = true;
				face().then(({data: res}) => {
					if (res.code == 1) { this.is_face = res.data.is_face; this.img = res.data.face_image; }
				}).finally(() => setTimeout(() => this.isProcessing = false, 500));
			},
			handleImageClick() { if (this.img) this.$PREVIEW_IMAGE(this.img); },
			handleAction() { this.is_face === 2 ? this.showDeleteDialog() : this.uploadImage(); },
			showDeleteDialog() { uni.showModal({ title: '删除人脸', content: '请联系店长删除人脸后，再重新录入使用。', showCancel: false, confirmText: '我知道了', confirmColor: '#73F0EA' }); },
			uploadImage() {
				if (this.isProcessing) return;
				uni.chooseImage({ count: 1, sizeType: ["original"], sourceType: ["camera", "album"], success: (res) => this.processImage(res.tempFilePaths[0]) });
			},
			processImage(imagePath) {
				this.isProcessing = true; this.loadingText = '人脸检测中...';
				this.$FACEUPLOAD(imagePath, 'face').then(result => {
					if (result.sure) { this.img = result.img; this.loadingText = '正在提交...'; this.submitFace(); } 
					else { this.img = result.img; this.isProcessing = false; this.showToast('人脸检测失败，请重新选择清晰的人脸照片', 'error'); }
				}).catch(() => { this.isProcessing = false; this.showToast('上传失败，请重试', 'error'); });
			},
			submitFace() {
				if (!this.img) { this.isProcessing = false; this.showToast('请先上传人脸照片', 'warning'); return; }
				face({image: this.img}).then(({data: res}) => {
					if (res.code == 1) { this.is_face = 2; this.showToast(res.msg || '人脸采集成功！', 'success'); } 
					else this.showToast(res.msg || '人脸采集失败，请重试', 'error');
				}).finally(() => this.isProcessing = false);
			},
			handleMainAction() {
				if (this.isProcessing) return;
				switch (this.is_face) {
					case 0: this.showMembershipDialog(); break;
					case 1: this.submitFace(); break;
					case 2: uni.navigateBack({delta: 1}); break;
				}
			},
			showMembershipDialog() {
				uni.showModal({ title: '会员服务提示', content: '为了您能够正常使用智能门禁服务，请您先开通会员服务。', showCancel: true, cancelText: '稍后再说', confirmText: '去开通', confirmColor: '#73F0EA' });
			},
			showToast(message, type = 'default') { this.$refs.uToast.show({ title: message, type: type, icon: false }); }
		}
	};
</script>


<style lang="scss">
	page {
		background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));
		min-height: 100vh;
	}

	.face-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;

		// 头部状态栏
		.header-section {
			padding: 80rpx 40rpx 40rpx;
			display: flex;
			justify-content: center;

			.status-indicator {
				display: flex;
				align-items: center;
				padding: 16rpx 32rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20rpx);
				transition: all 0.3s ease;

				.status-text {
					margin-left: 12rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #333;
				}

				&.status-pending { border-left: 6rpx solid #FFA500; }
				&.status-ready { border-left: 6rpx solid #73F0EA; }
				&.status-completed { border-left: 6rpx solid #4CAF50; }
			}
		}

		// 主要内容
		.main-content {
			flex: 1;
			padding: 0 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.face-capture-area {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.portrait-container {
					width: 300rpx;
					height: 300rpx;
					position: relative;
					border-radius: 50%;
					overflow: hidden;
					background: rgba(115, 240, 234, 0.1);
					border: 4rpx solid #73F0EA;
					transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
					box-shadow: 
						0 10rpx 30rpx rgba(115, 240, 234, 0.2),
						0 0 0 8rpx rgba(115, 240, 234, 0.1);

					&.has-image {
						border-color: #4CAF50;
						box-shadow: 
							0 15rpx 40rpx rgba(76, 175, 80, 0.3),
							0 0 0 8rpx rgba(76, 175, 80, 0.1);
					}

					&.processing {
						animation: pulse-ring 2s infinite;
					}

					.scan-frame {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 2;

						.scan-line {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 4rpx;
							background: linear-gradient(90deg, transparent, #73F0EA, transparent);
							animation: scan-move 3s infinite;
						}

						.corner {
							position: absolute;
							width: 40rpx;
							height: 40rpx;
							border: 4rpx solid #73F0EA;
							animation: corner-blink 2s infinite;

							&.corner-tl { top: 20rpx; left: 20rpx; border-right: none; border-bottom: none; }
							&.corner-tr { top: 20rpx; right: 20rpx; border-left: none; border-bottom: none; }
							&.corner-bl { bottom: 20rpx; left: 20rpx; border-right: none; border-top: none; }
							&.corner-br { bottom: 20rpx; right: 20rpx; border-left: none; border-top: none; }
						}
					}

					.avatar-image {
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: all 0.3s ease;
						opacity: 0.7;

						&.uploaded {
							opacity: 1;
							z-index: 3;
						}
					}

					.action-overlay {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						z-index: 4;

						.action-button {
							width: 100%;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background: rgba(115, 240, 234, 0.9);
							backdrop-filter: blur(10rpx);
							transition: all 0.3s ease;

							&.upload-action {
								background: rgba(115, 240, 234, 0.9);
							}

							&.delete-action {
								background: rgba(129, 130, 129, 0.9);
							}

							&:active {
								transform: scale(0.98);
							}

							.action-text {
								margin-left: 8rpx;
								font-size: 24rpx;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}

					.loading-overlay {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: rgba(115, 240, 234, 0.95);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						z-index: 5;
						backdrop-filter: blur(10rpx);

						.loading-spinner {
							width: 60rpx;
							height: 60rpx;
							border: 4rpx solid rgba(255, 255, 255, 0.3);
							border-top: 4rpx solid #FFFFFF;
							border-radius: 50%;
							animation: spin 1s linear infinite;
							margin-bottom: 20rpx;
						}

						.loading-text {
							font-size: 24rpx;
							color: #FFFFFF;
							font-weight: 500;
						}
					}
				}

				.status-tips {
					margin-top: 60rpx;
					width: 100%;
					max-width: 600rpx;

					.main-title {
						font-size: 48rpx;
						font-weight: 700;
						text-align: center;
						color: #333;
						margin-bottom: 40rpx;
					}

					.description-list {
						.tip-item {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 24rpx;
							padding: 20rpx;
							background: rgba(255, 255, 255, 0.8);
							border-radius: 16rpx;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
							animation: slideInUp 0.6s ease forwards;
							opacity: 0;
							transform: translateY(20rpx);

							.tip-text {
								margin-left: 16rpx;
								font-size: 28rpx;
								line-height: 1.6;
								color: #666;
								flex: 1;
							}
						}
					}
				}
			}
		}

		// 底部按钮
		.footer-section {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 40rpx 40rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 1) 100%);
			backdrop-filter: blur(20rpx);
			transform: translateY(100%);
			transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

			&.show {
				transform: translateY(0);
			}

			.main-button {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				position: relative;
				overflow: hidden;
				transition: all 0.3s ease;
				box-shadow: 0 8rpx 25rpx rgba(115, 240, 234, 0.3);

				&.button-primary {
					background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
				}

				&.button-success {
					background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
					box-shadow: 0 8rpx 25rpx rgba(76, 175, 80, 0.3);
				}

				&.button-warning {
					background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
					box-shadow: 0 8rpx 25rpx rgba(255, 165, 0, 0.3);
				}

				&.button-disabled {
					background: #ccc;
					box-shadow: none;
					pointer-events: none;
				}

				&:active {
					transform: scale(0.98);
				}

				.button-content {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					position: relative;
					z-index: 2;

					.button-text {
						margin-left: 12rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						letter-spacing: 2rpx;
					}
				}

				.button-glow {
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
					animation: shine 2s infinite;
				}
			}
		}
	}

	// 动画效果
	@keyframes pulse-ring {
		0%, 100% { box-shadow: 0 10rpx 30rpx rgba(115, 240, 234, 0.2), 0 0 0 8rpx rgba(115, 240, 234, 0.1); }
		50% { box-shadow: 0 15rpx 40rpx rgba(115, 240, 234, 0.4), 0 0 0 16rpx rgba(115, 240, 234, 0.2); }
	}

	@keyframes scan-move {
		0% { transform: translateY(-300rpx); }
		100% { transform: translateY(300rpx); }
	}

	@keyframes corner-blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	@keyframes slideInUp {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	@keyframes shine {
		0% { left: -100%; }
		100% { left: 100%; }
	}
</style>